<template>
	<view class="main">
		<view class="address" @tap="seleAdd">
			<image class="icon" src="@/static/img/address.png" mode=""></image>
			<view class="msg" v-if="!isAdd">请选择默认收货地址</view>
			<view class="info" v-else>
				<view class="add">{{addData.province}} {{addData.city}} {{addData.district}}</view>
				<view class="name">
					<span>{{addData.realname}}</span>
					<span>{{addData.mobile}}</span>
				</view>
			</view>
			<u-icon name="arrow-right" color="#000" size="15"></u-icon>
		</view>
		<view class="goods">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="img">
					<image :src="item.cover_ico" mode=""></image>
				</view>
				<view class="txt">
					<view class="name">
						{{item.product_name}}
					</view>
					<view class="sku">
						<text>{{item.parameters}}</text>
					</view>
					<view class="price">
						<span>{{item.price}}</span>
						<view class="num">
							<u-icon name="close" color="#000" size="12" bold></u-icon>
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<ul>
				<li>
					<view class="msg">应付款</view>
					<view class="num">￥{{data.total}}</view>
				</li>
				<li>
					<view class="msg">运费</view>
					<view class="num">￥{{data.transfee}}</view>
				</li>
			</ul>
		</view>
		<view class="selePay">
			<view class="tit">
				支付方式
			</view>
			<view class="">
				<u-radio-group v-model="paytype" iconPlacement="right" placement="column" borderBottom>
					<!-- <u-radio labelColor="#fff" activeColor="#137854" label="支付宝支付"></u-radio> -->
					<u-radio labelColor="#000" v-if="data.mark == 'bill'" activeColor="#EA504F" label="微信支付" :name="-1"></u-radio>
					<u-radio labelColor="#000" v-if="data.mark == 'bill'" activeColor="#EA504F" label="红积分支付" :name="2"></u-radio>
					<!-- #ifdef APP-PLUS -->
					<u-radio labelColor="#000" activeColor="#EA504F" label="在线支付" :name="-1"></u-radio>
					<!-- #endif -->
					<u-radio labelColor="#000" v-if="data.mark == 'cash'" activeColor="#EA504F" label="红积分支付" :name="2"></u-radio>
					<u-radio v-if="data.mark == 'cp'" labelColor="#000" activeColor="#EA504F" label="购物积分支付" :name="4"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="bottom">
			<view class="in">
				<view class="price">￥{{data.transfee + data.total}}</view>
				<view class="btn" @tap="showmod">订单支付</view>
			</view>
		</view>
		<u-modal confirmColor="#000" :show="show" :title="title" @confirm="chat" :closeOnClickOverlay="true"
			@close="show = false">
			<view class="slot-content">
				<input v-model="psd2" placeholder="请输入二级密码" type="password" value="" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOpenId,
		getOrder,
		readd,
		createorder,
		checkpwd2,
		user,
		payNow,
		checkOrder
	} from '@/api/index.js'
	export default {
		data() {
			return {
				msg: '',
				value: '',
				list: [],
				data: {},
				isAdd: false,
				tag: '',
				addData: {},
				paytype: '',
				show: false,
				title: '验证二级密码',
				psd2: '',
				ispsd2: ""
			};
		},
		onLoad(e) {
			this.tag = e.tag
			getOrder({
				tag: e.tag
			}).then(res => {
				console.log(res)
				this.list = res.data.list
				this.data = res.data
			})
		},
		onShow() {
			this.getAdd()
			user().then(res => {
				this.ispsd2 = res.data.is_password2
			})
		},
		methods: {
			async showmod() {
				if (!this.paytype) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				if (this.ispsd2 == 1) {
					this.show = true
				} else {
					uni.showToast({
						title: '请先设置二级密码',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pageB/psd2'
						})
					}, 1000)
				}
			},
			async chat() {
				if (!this.psd2) {
					uni.showToast({
						title: '请输入二级密码',
						icon: 'none'
					})
					return
				}
				let res = await checkpwd2({
					password: this.psd2
				})
				if (res.code == 1) {
					this.upOrder()
					this.show = false
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			upOrder() {
				createorder({
					tag: this.tag,
					paytype: this.paytype
				}).then(res => {
					if (res.code == 1) {
						if (this.paytype == -1) {
							// uni.navigateTo({
							// 	url: `/pageB/selePay?price=${res.data}&tag=${this.tag}`
							// })
							let _this = this;
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									_this.pay(loginRes.code);
								}
							});
						}
						if (this.paytype == 2) {
							uni.showToast({
								title: '红积分支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pageD/orderList'
								})
							}, 1000)
						}
						if (this.paytype == 4) {
							uni.showToast({
								title: '购物积分支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pageD/orderList'
								})
							}, 1000)
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			},
			async pay(code) {
				let res1 = await getOpenId({
					code: code
				})
				// console.log(res1)
				let openid = res1.data;
				let res2 = await payNow({
					order_num: this.tag,
					openid: openid,
					paytype: 'wechat'
				})
				if (res2.code == 1) {
					let paymentData = res2.data.data;
					// console.log(paymentData)
					uni.requestPayment({
						timeStamp: paymentData.timeStamp,
						nonceStr: paymentData.nonceStr,
						package: paymentData.package,
						signType: 'MD5',
						paySign: paymentData.paySign,
						success: (res) => {
							uni.showToast({
								title: '支付成功！',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.redirectTo({
									url: '/pageD/orderList'
								})
							},1000)
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							})
						}
					})
				}
			},
			seleAdd() {
				uni.navigateTo({
					url: '/pageB/address?type=1'
				})
			},
			async getAdd() {
				let res = await readd()
				console.log(res)
				if (res.code == 1) {
					this.isAdd = true
					this.addData = res.data
				} else {
					uni.showToast({
						title: '暂无默认地址',
						icon: 'none'
					})
				}
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #f6f6f6;
		padding: 30rpx;
		padding-bottom: 120rpx;

		::v-deep.u-modal {
			background-color: #fff;

			input {
				color: #000;
			}
		}

		::v-deep.u-modal__title {
			color: #000 !important;
		}

		.address {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 40rpx;

			.icon {
				width: 52rpx;
				height: 52rpx;
				margin-right: 14rpx;
			}

			.msg {
				font-size: 26rpx;
				color: #000;
			}

			.info {
				flex: 1;

				.add {
					color: #000;
					font-size: 28rpx;
					margin-bottom: 26rpx;
				}

				.name {
					color: #000;
					font-size: 24rpx;

					span {
						margin-right: 10rpx;
					}
				}
			}

			.right {
				position: absolute;
				right: 30rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}

		.goods {
			background-color: #fff;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.item:last-child {
				margin-bottom: 0;
			}

			.img {
				margin-right: 20rpx;

				image {
					border-radius: 10rpx;
					width: 170rpx;
					height: 170rpx;
				}
			}

			.txt {
				flex: 1;
				height: 170rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.name {
					width: 100%;
					color: #000;
					font-size: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.sku {
					text {
						font-size: 26rpx;
						color: #fff;
						padding: 6rpx 10rpx;
						background-color: #EA504F;
					}
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000;
					font-size: 26rpx;
					font-weight: 700;

					.num {
						color: #000;
						font-size: 26rpx;
						font-weight: 400;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}

		.ordertag {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.notes {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.msg {
					color: #3d3d3d;
					font-size: 28rpx;
					margin-right: 20rpx;
				}

				.right {
					font-size: 28rpx;
					color: #3D3D3D;
					display: flex;
					align-items: center;

					text {
						color: #CF4444;
					}
				}

				input {
					flex: 1;
					text-align: right;
					font-size: 24rpx;
				}
			}

			.notes:last-child {
				margin-bottom: 0;
			}
		}

		.selePay {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.tit {
				font-size: 30rpx;
				color: #000;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			::v-deep.u-radio {
				margin-bottom: 20rpx;
			}

			::v-deep.u-radio:last-child {
				border: none;
				margin-bottom: 0;
			}
		}

		.pay {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			ul {
				padding: 0;

				li {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 30rpx;
				}

				li:last-child {
					margin-bottom: 0;
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			background-color: #fff;

			.in {
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					color: #EA504F;
					font-size: 40rpx;
					font-weight: 700;
				}

				.btn {
					font-size: 24rpx;
					padding: 20rpx 48rpx;
					background-color: #EA504F;
					border-radius: 200rpx;
					color: #fff;
				}
			}
		}
	}
</style>